﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>IDrawUGuess</title>
  <link type="text/css" rel="Stylesheet" href="index-classic.css" />
  <link type="text/css" rel="Stylesheet" href="bbutton.css" />
  <script type="text/javascript" src="../socket.io.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  <script type="text/javascript" src="../Lib/jquery-impromptu.3.1.min.js"></script>
  <script type="text/javascript">
    var usercount = 0;
    var userindex;
    var socket;
    var allusers = {};
    var username;
    var usermouses = [];
    var context;
    var drawing = false;
    var drawer;
    var lastPoint = null;
    $(function () {
      socket = io.connect('http://localhost:8081');
      socket.on('connect', function () {
        $('#mainArea').append($('<p>').append('<em>You have connected to the server.<em>'));
        $.prompt('Welcome to IdrawUguess!', { prefix: 'impromptu', callback: mycallbackfunc });
      });

      socket.on('announcement', function (msg) {
        $('#mainArea').append($('<p>').append($('<em>').text(msg)));
      });

      socket.on('drawWord', function (msg) {
        $.prompt('Please draw the ' + msg, { prefix: 'impromptu' });
        $('#drawword').text('Please draw the ' + msg);
        bindUserInputs();
      });

      socket.on('user message', message);
      socket.on('mousemove', function (from, event) {
        usermousemove(event);
      });

      socket.on('mousedown', function (from, event) {
        lastPoint = { x: event.offsetX, y: event.offsetY };
        drawing = true;
      });

      socket.on('mouseup', function (from, event) {
        lastPoint = null;
        drawing = false;
      });

      socket.on('nicknames', function (nicknames) {
        allusers = nicknames;
        $('#nicknames').empty();
        for (var i = 0; i < nicknames.count; i++) {
          $('#nicknames').append($('<div>').text(nicknames[i].name));
        }
      });

      socket.on('reconnect', function () {
        $('#mainArea').remove();
        message('System', 'Reconnected to the server');
      });

      socket.on('reconnecting', function () {
        message('System', 'Attempting to re-connect to the server');
      });

      socket.on('error', function (e) {
        message('System', e ? e : 'A unknown error occurred');
      });
    });
    function mycallbackfunc(e, v, m, f) {
      var txt = 'Please enter your name:<br /><input type="text" id="alertName" name="alertName" value="name here" />';

      function mysubmitfunc(e, v, m, f) {
        if (m.alertName == "") {
          alert('name cannot be empty');
          return false;
        }
        username = m.alertName;
        socket.emit('nickname', username, function (set) {
          if (!set) {
            active = true;
            clear();
            $('#username').text(username);
            return;
          }
          alert('nick name already defined');
          $.prompt(txt, {
            submit: mysubmitfunc,
            buttons: { Ok: true }
          });
        });
        return true;
      }

      $.prompt(txt, {
        submit: mysubmitfunc,
        buttons: { Ok: true }
      });
    }

    function message(from, msg) {
      $('#mainArea').append($('<p>').append($('<b>').text(from), "  " + msg));
    }
  </script>
</head>
<body>
  <div id="header" class="md-header md-header-main">
<div id="logo">
    </div>
    <a href="#" data-icon="★" class="button orange brackets glossy">New Game</a> <a href="#"
      data-icon="☺" class="button pink brackets glossy">Current Games</a>
</div>
<div class="roundBorderA container">
      <div id="left">
        <a href="#" class="button brackets back glossy paletteItem" style="background-color: Red">
        </a><a href="#" class="button brackets back glossy paletteItem" style="background-color: Green">
        </a><a href="#" class="button brackets back glossy paletteItem" style="background-color: Maroon">
        </a><a href="#" class="button brackets back glossy paletteItem" style="background-color: Purple">
        </a>
      </div>
      <div id="main">
        <div style="height: 80px">
          <a href="#" class="button brackets back glossy paletteItem" style="background-color: Fuchsia">
          </a><a href="#" class="button brackets back glossy paletteItem paletteItem_Selected"
            style="background-color: Black"></a><a href="#" class="button brackets back glossy paletteItem"
              style="background-color: Blue"></a><a href="#" class="button brackets back glossy paletteItem"
                style="background-color: Aqua"></a><a href="#" class="button brackets back glossy paletteItem"
                  style="background-color: Yellow"></a>
        </div>
        <div class="canvasContainer">
          <canvas id="canvas" width="480" height="480"></canvas>
        </div>
        <div id="inputmessage">
          <input type="button" id="giveUp" value="GiveUp" />
          <input type="button" id="clear" value="Clear" />
          <input id="message" />
          <input type="button" id="sendBtn" value="Send" />
        </div>
      </div>
      <div id="right">
        <div id="test">
        </div>
        <div class="userinfo roundBorderC module">
          <div class="subtitle">
            Player: <span id="username" style="font-weight: bold"></span>
          </div>
          <div style="padding: 5px 15px;">
            Score: <span id="score" style="font-weight: bold">0</span></div>
          <div style="padding: 5px 15px;">
            Drawing: <span id="drarword" style="font-weight: bold"></span>
          </div>
        </div>
        <div id="onlineUsers" class="roundBorderC module">
          <div class="subtitle">
            Online Users</div>
          <div id="nicknames">
          </div>
        </div>
        <div class="roundBorderC module">
          <div class="subtitle">
            System</div>
          <div id="mainArea">
          </div>
        </div>
        <a href="#" class="button blue brackets glossy" style="font-size: 18px">Ready</a>
        <a href="#" class="button blue brackets glossy" style="font-size: 18px">Leave</a>
      </div>
    </div>
  
  <script type="text/javascript">

    $(function () {
      $('#sendBtn').click(function () {
        message('me: ', $('#message').val());
        socket.emit('user message', $('#message').val());
        clear();
        $('#mainArea').get(0).scrollTop = 10000000;
        return false;
      });
      $('#clear').click(function () {
        context.fillStyle = '#fff';
        context.fillRect(0, 0, 480, 480);
      });

      context = $('canvas')[0].getContext('2d');
    });

    function bindUserInputs() {
      $('canvas').mousedown(function (event) {
        drawing = true;
        lastPoint = { x: event.offsetX, y: event.offsetY };
        socket.emit('mousedown', { offsetX: event.offsetX, offsetY: event.offsetY });
      }).mouseup(function (event) {
        drawing = false;
        lastPoint = null;
        socket.emit('mouseup', { offsetX: event.offsetX, offsetY: event.offsetY });
      }).mousemove(function (event) {
        if (!drawing || !lastPoint) return;
        usermousemove(event);
        socket.emit('mousemove', { offsetX: event.offsetX, offsetY: event.offsetY });
        //event.pageX + ", " + event.pageY
      });
    }

    function clear() {
      $('#message').val('');
    };

    function usermousemove(event) {
      var currentPoint = { x: event.offsetX, y: event.offsetY };
      //$('#test').text(event.offsetX + ", " + event.offsetY);
      drawLine(context, lastPoint, currentPoint);
      lastPoint = currentPoint;
    }

    function drawLine(context, start, stop) {
      context.strokeStyle = "#000000"; //线的颜色                    
      context.lineWidth = 10; //线的宽度
      context.lineCap = "butt"; //butt\round\square
      context.beginPath(); //启动path
      context.moveTo(start.x, start.y);
      context.lineTo(stop.x, stop.y);
      context.stroke(); //绘画
      context.closePath(); //关闭path
    }
  </script>
  
</body>
</html>
